---
---

// Imports -------------- //

@import 'all';

// Variables -------------- //

$color-grid-dark:      #727272;
$color-grid-light:     #e3e4e5;
$font-monospace:       Consolas, Monaco, 'Andale Mono', monospace;


.site-header {
  @include position(fixed, 0 null null 0);
  background-color: $color-primary-darkest;

  @include media($nav-width) {
    border-bottom: none;
    position: relative;
  }

  // Removes fixed header on Android in landscape with an open keyboard
  @media screen and (min-aspect-ratio: 13/9) and (max-width: ($medium-screen)) {
    position: absolute;
  }

  .usa-disclaimer-official,
  .site-logo {
    margin-left: $site-margins-mobile;

    @include media($nav-width) {
      margin-left: $site-margins;
    }
  }

  .usa-disclaimer-stage {
    margin-right: $site-margins-mobile;

    @include media($nav-width) {
      margin-right: $site-margins;
    }
  }


  .usa-button-list {
    float: right;
    display: none;
    margin-top: -5px;

    @include media($nav-width) {
      line-height: 8rem;
      margin-top: 0;
      display: block;
      padding-right: $site-margins;
    }

    // scss-lint:disable SelectorDepth, NestingDepth
    li {
      display: inline;
      font-family: $font-sans;

      &:last-child .usa-button {
        margin-right: 0;
      }
    }

    .usa-button {
      @include margin(0 null);
    }
  }
}

.site-header-navbar {
  border-bottom: none;
  @include media($nav-width) {
    display: initial;
    height: 8rem;
    width: 100%;
  }

  &.is-scrolled {
    @include media($nav-width) {
      display: none;
    }
  }

  // Firefox fix so that navbar buttons to align right
  @-moz-document url-prefix() {
    @include media($nav-width) {
      padding-top: 1px;
    }
  }
}

@mixin outline-inverse-button {
  // TODO: Fix this with button mixin
  .usa-button.usa-button-outline-inverse {
    box-shadow: inset 0 0 0 2px $color-primary;
    color: $color-primary;

    &:hover {
      box-shadow: inset 0 0 0 2px $color-primary-darker;
      color: $color-primary-darker;
    }
  }
}

.sidenav-mobile {
  @include outline-inverse-button;

  @include media($nav-width) {
    display: none;
  }

  .usa-sidenav-sub_list {
    &[aria-hidden=true] {
      display: none;
    }
  }

  li > button {
    @include button-unstyled;
    font-weight: $font-normal;
    padding: 1.4rem 1.5rem 1rem 1.8rem;

    &:hover {
      background-color: $color-gray-lightest;
      color: $color-primary;
    }

    &[aria-expanded=false] {
      background-image: url('../img/plus-alt.png');
      background-image: url('../img/plus-alt.svg');
      background-repeat: no-repeat;
      background-position: right 0 center;
      background-size: 1rem;
    }

    &[aria-expanded=true] {
      background-image: url('../img/minus-alt.png');
      background-image: url('../img/minus-alt.svg');
      background-repeat: no-repeat;
      background-position: right 0 center;
      background-size: 1rem;
    }
  }

  .usa-button-list {
    margin-top: 4rem;
  }
}

.site-logo {
  @include media($nav-width) {
    margin-top: 0;
  }

  a {
    color: $color-white;
  }

  em {
    font-family: $font-serif;
    font-size: 1.4rem;
    line-height: 4rem;

    @include media($nav-width) {
      font-size: $h3-font-size;
      line-height: 8rem;
    }
  }
}

.site-nav-secondary {
  display: none;

  @include media($nav-width) {
    background-color: $color-white;
    border-bottom: 1px solid $color-gray-light;
    clear: both;
    display: block;
    height: $height-nav-secondary;
    padding-left: 3rem;
  }

  &.is-scrolled {
    position: fixed;
    top: 0;
    width: 100%;
  }

  ul {
    @include unstyled-list;

    li {
      display: inline;
      padding-right: 3rem;
    }
  }

  a {
    @include padding (1.6rem null);
    color: $color-gray;
    font-size: $h6-font-size;
    letter-spacing: 0.3px;
    line-height: $height-nav-secondary;
    text-decoration: none;

    &:hover {
      color: $color-primary;
      text-decoration: underline;
    }

    &.usa-current {
      color: $color-primary;
      font-weight: $font-bold;
    }
  }
}

// Sidebar Nav --------- //

.sidenav {
  display: none;

  @include media($nav-width) {
    bottom: 0;
    display: block; // starting: not scrolled
    float: left; // starting: not scrolled
    overflow: auto;
    padding: 4rem 1rem 3rem 3rem;
    width: $width-nav-sidebar;
  }

  &.is-scrolled {
    position: fixed;
    top: $height-nav-secondary;
  }

  .lt-ie9 & {
    width: 25%;
  }

  .usa-navigation-submenu {
    &[aria-hidden="false"] {
      display: block;
    }
  }
}

// Main Content --------- //

.main-content {
  @include position(absolute, 4rem 0 0 null);
  display: inline-block; // starting: not scrolled
  margin-top: 4rem; // starting: not scrolled
  position: relative;
  width: 100%;
  top: 6.3rem; // height of disclaimer + navbar on mobile

  @include media($nav-width) {
    width: calc(100% - #{$width-nav-sidebar});
    top: 0;
  }

  &.is-scrolled {
    @include media($nav-width) {
      position: absolute;
      top: 15.3rem;
    }
  }

  .lt-ie9 & {
    width: 75%;
  }
}

// Styleguide Content -------- //

.styleguide-content {
  @include padding(null $site-margins-mobile);
  margin-bottom: 5em;
  max-width: $site-max-width;
  position: relative;

  @media (min-width: $nav-width) {
    @include padding(null $site-margins);
  }

  header {
    > h1 {
      display: inline-block;
      margin-top: 0;
    }
  }

  section {
    > h2 {
      display: inline-block;
    }

    > .tooltip {
      margin-top: 56px;
    }
  }
}

// Label links

%label-maturity {
  color: $color-gray-dark;
  font-size: 1.4rem;
  font-weight: $font-bold;
  margin-left: 1.2rem;
  position: absolute;
  text-decoration: none;

  &:hover,
  &:visited {
    color: $color-gray-dark;
  }

  &[href^="http:"]:not([href*="standards.com"]),
  &[href^="https:"]:not([href*="standards.com"]) {
    &::after {
      display: none;
    }
  }
}

@mixin label-link($color-background, $color-background-hover) {
  @extend %label-maturity;
  background-color: $color-background;

  &:hover {
    background-color: $color-background-hover;
  }
}

.label-alpha {
  @include label-link($color-gold-lightest, $color-gold-lighter);
}

.label-beta,
.label-in-progress {
  @include label-link($color-primary-alt-lightest, $color-primary-alt-light);
}

.label-recommended,
.label-done {
  @include label-link($color-green-lightest, $color-green-lighter);
}

h1 + .tooltip {
  a {
    margin-top: 1.7rem;
  }
}

h2 + .tooltip {
  a {
    margin-top: 1.3rem;
  }
}

.heading-margin-alt {
  margin-top: 6rem;
}

.site-subheading {
  @include h6;
  color: $color-gray;
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
  margin-top: 0;
}

// Footer --------------- //

.site-footer {
  @media (min-width: $medium-screen + $width-nav-sidebar) {
    @include margin(null 3rem);
  }
}

.site-footer-nav {
  margin-bottom: 5.5rem;

  @media (min-width: $medium-screen + $width-nav-sidebar) {
    display: none;
  }

  .usa-sidenav-sub_list {
    display: none;
  }
}

.site-footer-info {
  @include padding(3rem null);
  border-top: 1px solid $color-gray-light;

  p {
    font-size: $h5-font-size;

    &:first-child {
      margin-top: 0;
    }
  }

  img {
    margin-right: 1.2rem;
    width: 3.2rem;

    &.logo-usds {
      width: 4.3rem;
    }
  }

  > .usa-grid {
    @media (min-width: $medium-screen + $width-nav-sidebar) {
      margin-left: 0;
      padding-left: 0;
    }
  }
}

.logo-links {
  margin-bottom: 3rem;
  margin-right: 1rem;

  @include media($medium-screen) {
    float: left;
    margin-bottom: 0;
  }

  a {
    @include media-link;
    color: $color-gray-lighter;

    &:hover {
      color: $color-white;
    }
  }
}

.footer-text {
  overflow: hidden;
}

// Pattern Preview Boxes -------- //

.preview {
  @include clearfix;
  @include margin(2em null);
  background-color: $color-white;
  padding: $site-margins;
  border: 1px solid #eeeeee; // scss-lint:disable ColorVariable

  .usa-background-dark {
    @include padding(null 1em);
    display: inline-block;
  }

  > *:first-child {
    margin-top: 0;
  }
}

.preview-no_border {
  @include margin(0 null 2em);
  border: 0;
  padding: 0;
}

// Custom preview box styles

.preview-lists {
  padding-bottom: 0;

  .usa-heading-alt {
    margin-top: 0;
  }
}

.preview-dropdown {
  padding-top: 0;
}

// Search bar grid --------- //

.preview-search-bar {
  .usa-grid {
    padding: 0;
  }
}

// Custom styles to illustrate invisible grid for web design standards

.grid-example {
  .usa-grid {
    background: $color-grid-light;

    > * {
      @include margin(.5em null);
      color: $color-white;
      padding: 1em;
      background: $color-grid-dark;
    }
  }

  .usa-width-one-twelfth {
    @include media($medium-screen) {
      @include padding(null 0);
    }
  }
}

.grid-example-blank {
  .usa-grid {
    text-align: center;
  }
}

.grid-text {
  .usa-grid {
    background: $color-grid-dark;

    > * {
      background: $color-grid-light;
      color: $color-black;
    }

    h3 {
      margin-top: 0;
    }

    p {
      margin-bottom: 0;
    }
  }
}

h3 + .button_wrapper {
  margin-top: -0.5em;
}

.button_wrapper {
  clear: both;
  display: block;
  margin-left: -1rem;
  padding: 0 1rem;

  @include media($small-screen) {
    display: table;
  }

  button:last-child {
    margin-right: 0;
  }
}

.button_wrapper-dark {
  background: $color-gray-dark;
}

.usa-heading {
  color: $color-primary-darker;
}

// Colors -------------- //

.usa-color-short {
  height: 7rem;
  margin-bottom: 1rem;
}

.usa-color-name {
  font-size: 1.2rem;

  @include media($medium-screen) {
    margin: 0;
  }

  @include margin(0 null 1em);
}

.usa-color-row {
  margin-bottom: 3rem;

  .color-big {
    @include media($medium-screen) {
      float: left;
      padding-right: 4%;
      width: 32%;
    }
  }

  .color-small {
    float: left;
    margin-right: 0;
    width: 50%;

    @include media($medium-screen) {
      width: 17%;
    }
  }

  p {
    font-family: $font-monospace;
    font-size: 1.5rem;

    &:last-of-type {
      font-size: 11px;
    }
  }
}

.usa-primary-color-section {
  margin-bottom: 0;

  @include media($medium-screen) {
    margin-bottom: 8rem;
  }

  .usa-color-square {
    @include span-columns(6);
    margin-bottom: 7rem;
    padding-bottom: 50%;
    position: relative;

    @include media($medium-screen) {
      @include span-columns(3);
      margin-bottom: 0;
      padding-bottom: 19%;
    }
  }

  .usa-mobile-end-row {
    margin-right: 0;

    @include media($medium-screen) {
      margin-right: 2.35765%;
    }
  }

  .usa-color-name {
    margin: 0;
  }
}

.usa-color-inner-content {
  position: absolute;
  top: 100%;
}

.usa-color-hex {
  @include margin(1rem null 0);
  font-weight: $font-bold;
}

.usa-color-text {
  @include padding(1rem 2rem);
  font-weight: $font-bold;
  margin-bottom: .4rem;
}

.usa-color-outline {
  .usa-color-text {
    box-shadow: inset 0 0 0 1px $color-gray;
  }
}

// Color background helpers

.usa-color-primary {
  background-color: $color-primary;
}

.usa-color-primary-darker {
  background-color: $color-primary-darker;
}

.usa-color-primary-darkest {
  background-color: $color-primary-darkest;
}

.usa-color-base {
  background-color: $color-base;
}

.usa-color-gray-dark {
  background-color: $color-gray-dark;
}

.usa-color-gray-light {
  background-color: $color-gray-light;
}

.usa-color-white {
  background-color: $color-white;
  box-shadow: inset 0 0 0 1px $color-gray;
}

.usa-color-primary-alt {
  background-color: $color-primary-alt;
}

.usa-color-primary-alt-dark {
  background-color: $color-primary-alt-dark;
}

.usa-color-primary-alt-darkest {
  background-color: $color-primary-alt-darkest;
}

.usa-color-primary-alt-light {
  background-color: $color-primary-alt-light;
}

.usa-color-primary-alt-lightest {
  background-color: $color-primary-alt-lightest;
}

.usa-color-secondary {
  background-color: $color-secondary;
}

.usa-color-secondary-dark {
  background-color: $color-secondary-dark;
}

.usa-color-secondary-darkest {
  background-color: $color-secondary-darkest;
}

.usa-color-secondary-light {
  background-color: $color-secondary-light;
}

.usa-color-secondary-lightest {
  background-color: $color-secondary-lightest;
}

.usa-color-gray {
  background-color: $color-gray;
}

.usa-color-gray-lighter {
  background-color: $color-gray-lighter;
}

.usa-color-gray-lightest {
  background-color: $color-gray-lightest;
}

.usa-color-gray-warm-dark {
  background-color: $color-gray-warm-dark;
}

.usa-color-gray-warm-light {
  background-color: $color-gray-warm-light;
}

.usa-color-gray-cool-light {
  background-color: $color-gray-cool-light;
}

.usa-color-gold {
  background-color: $color-gold;
}

.usa-color-gold-light {
  background-color: $color-gold-light;
}

.usa-color-gold-lighter {
  background-color: $color-gold-lighter;
}

.usa-color-gold-lightest {
  background-color: $color-gold-lightest;
}

.usa-color-green {
  background-color: $color-green;
}

.usa-color-green-light {
  background-color: $color-green-light;
}

.usa-color-green-lighter {
  background-color: $color-green-lighter;
}

.usa-color-green-lightest {
  background-color: $color-green-lightest;
}

.usa-color-cool-blue {
  background-color: $color-cool-blue;
}

.usa-color-cool-blue-light {
  background-color: $color-cool-blue-light;
}

.usa-color-cool-blue-lighter {
  background-color: $color-cool-blue-lighter;
}

.usa-color-cool-blue-lightest {
  background-color: $color-cool-blue-lightest;
}

.usa-color-focus {
  background-color: $color-focus;
}

.usa-color-visited {
  background-color: $color-visited;
}

// Color text helpers

.usa-color-text-primary-darkest {
  color: $color-primary-darkest;
}

.usa-color-text-primary-darker {
  color: $color-primary-darker;
}

.usa-color-text-primary {
  color: $color-primary;
}

.usa-color-text-cool-blue-light {
  color: $color-cool-blue-light;
}

.usa-color-text-primary-alt-darkest {
  color: $color-primary-alt-darkest;
}

.usa-color-text-green {
  color: $color-green;
}

.usa-color-text-visited {
  color: $color-visited;
}

.usa-color-text-gray-dark {
  color: $color-gray-dark;
}

.usa-color-text-gray {
  color: $color-gray;
}

.usa-color-text-gray-warm-dark {
  color: $color-gray-warm-dark;
}

.usa-color-text-secondary-darkest {
  color: $color-secondary-darkest;
}

.usa-color-text-secondary-dark {
  color: $color-secondary-dark;
}

.usa-color-text-secondary {
  color: $color-secondary;
}

.usa-color-text-white {
  color: $color-white;
}

.usa-heading-alt {
  border-bottom: 1px solid $color-gray;
  padding-bottom: .8rem;
}

// scss-lint:disable QualifyingElement
h6.usa-heading-alt {
  margin-top: 4rem;
}
// scss-lint:enable QualifyingElement

.usa-typography-example-font {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .usa-font-example p {
    margin: 0;
  }
}

.font-example-paragraph {
  @include media($medium-screen) {
    width: 20rem;
  }
}

.usa-typography-example {
  .usa-monospace {
    @include margin(0 null 3rem);
    font-size: 1.2rem;
  }
}

.usa-monospace {
  font-family: $font-monospace;
}

code,
pre {
  background-color: $color-gray-lightest;
  font-family: $font-monospace;
  font-size: 1.3rem;
}

pre {
  padding: 1.6rem;

  code {
    padding: 0;

    &::before,
    &::after {
      display: none;
    }
  }
}

code {
  @include padding(0.2em null);

  &::before,
  &::after {
    letter-spacing: -0.2em;
    content: '\00a0';
  }
}

.highlight {
  pre {
    max-width: $lead-max-width;
  }
}

// Code snippet boxes

.usa-code-sample {
  pre,
  code {
    background: none;
    font-size: 1.2rem;
    padding: 0;
  }

  pre {
    [class*="language-"] {
      margin-top: 0;
    }
  }

  .usa-unstyled-list {
    @include unstyled-list;
  }

  .usa-accordion-content {
    padding: 0;
  }
}

// scss-lint:disable QualifyingElement
code[class*="language-"],
pre[class*="language-"] {
  color: $color-base;
}
// scss-lint:enable QualifyingElement

// Custom code sample colors

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: $color-primary-alt-darkest;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: $color-secondary;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: $color-green;
}

.token.punctuation {
  color: $color-primary-alt-darkest;
}

.alignment-example {
  border-left: 2px solid $color-primary-darker;
  padding-left: 1rem;
}

.help-text {
  border-top: 2px solid $color-primary-darker;
  color: $color-primary-darker;
  font-size: $em-base;
  padding-top: 1rem;
  text-align: center;
}

.text-tiny {
  @include margin(5px null 0);

  &:first-child {
    margin-top: 0;
  }
}

.typography-sans-intro {
  .text-huge {
    font-size: 140px;
    line-height: 1.05;
  }

  .text-tiny {
    font-size: 15px;
  }
}

.typography-serif-intro {
  .text-huge {
    font-size: 120px;
    line-height: 1.275;
  }

  .text-tiny {
    font-size: 13px;
  }
}

// Alt font styles

$font-light: 300;

@mixin font-lead-alt {
  font-size: $base-font-size;
  font-weight: $font-normal;
}

.serif-robust {
  .usa-display-alt {
    font-size: $h1-font-size;
    font-weight: $font-light;
  }

  .usa-font-lead {
    font-weight: $font-light;

    .usa-font-lead-alt {
      @include font-lead-alt;
    }
  }

  &.serif-body {
    .usa-font-example {
      p {
        font-family: $font-serif;
        font-size: rem(15px);
        line-height: $lead-line-height;
      }

      // scss-lint:disable SelectorDepth, NestingDepth
      .usa-font-lead {
        font-size: $h3-font-size;

        .usa-font-lead-alt {
          @include font-lead-alt;
        }
      }
    }
  }
}

.sans-style {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: $font-sans;
  }

  h1 {
    font-size: rem(44px);
  }

  h2 {
    font-size: rem(34px);
  }

  h3 {
    font-size: rem(24px);
  }

  h4 {
    font-size: rem(19px);
  }

  h5 {
    font-size: rem(16px);
  }

  h6 {
    font-size: rem(13px);
  }

  .usa-display {
    font-size: rem(59px);
  }

  .usa-display-alt {
    font-size: rem(44px);
    font-weight: $font-light;
  }

  .usa-font-lead {
    font-family: $font-sans;
    font-size: rem(22px);
    font-weight: $font-light;
    line-height: $base-line-height;
  }

  &.serif-body {
    .usa-font-example {
      p {
        font-family: $font-serif;
        font-size: rem(15px);
        line-height: $lead-line-height;
      }

      .usa-font-lead {
        font-family: $font-sans;
        font-size: rem(22px);
        font-weight: $font-light;
        line-height: $base-line-height;
      }
    }
  }
}

.serif-sans-minor {
  h6 {
    font-family: $font-sans;
  }
}

.usa-accordion-docs {
  margin-bottom: 6rem;
}

// This adds styleguide-only right and left margins for our disclaimer
// Since the layout we use is not in a grid
.usa-disclaimer {
  &.is-scrolled {
    @media (min-width: $medium-screen + $width-nav-sidebar) {
      display: none;
    }
  }
}

.usa-disclaimer-stage {
  @media (min-width: $medium-screen + $width-nav-sidebar) {
    display: block;
  }
}

// External link styles

[href^="http:"]:not([href*="standards.com"]),
[href^="https:"]:not([href*="standards.com"]) {
  @include external-link(external-link, external-link-hover);
}

.usa-styleguide-footer {
  [href^="http:"]:not([href*="standards.com"]),
  [href^="https:"]:not([href*="standards.com"]) {
    @include external-link(external-link-alt, external-link-alt-hover);
  }
}

.usa-button,
.link-download,
.media_link {
  &[href^="http:"]:not([href*="standards.com"]),
  &[href^="https:"]:not([href*="standards.com"]) {
    &::after {
      display: none;
    }
  }
}

.logo-links,
.usa-disclaimer-stage {
  [href^="http:"]:not([href*="standards.com"]),
  [href^="https:"]:not([href*="standards.com"]) {
    &::after {
      display: none;
    }
  }
}

// Page styles
.page-ui-components {
  .site-footer-nav {
    @include outline-inverse-button;

    .usa-button-list {
      margin-bottom: 5.5rem;

      // scss-lint:disable SelectorDepth
      li {
        display: initial;
      }
    }
  }

  .usa-font-lead {
    &:first-of-type {
      margin-top: 3.2rem;
    }
  }
}

.page-design-principles {
  @include media($medium-screen) {
    .usa-grid-full {
      @include margin(4rem null 3rem null);
    }
  }

  // full-width styles. TODO: look into making a template instead.
  .main-content {
    width: 100%;
  }

  .styleguide-content {
    @include margin(null auto);
  }

  .sidenav {
    display: none;
  }

  img {
    max-width: 18.4rem;
  }

  .site-footer-info {
    .usa-grid {
      margin-left: auto;
    }
  }

  .footer-text-one-half {
    @include media($medium-screen) {
      @include span-columns(6);
    }
  }
}

.link-download {
  display: table;

  &::before {
    background: url('../img/icon-download.png') no-repeat 0 0;
    background: url('../img/icon-download.svg') no-repeat 0 0;
    background-size: 100%;
    content: '';
    display: inline-block;
    height: 0.8em;
    margin-bottom: -1px;
    margin-right: 1.2rem;
    width: 0.8em;
  }
}

.link-download-subtext {
  margin-left: 2.6rem;
}

.link_group-download {
  .link-download {
    margin-bottom: 1rem;
  }
}

.page-product-roadmap,
.page-for-developers,
.page-for-designers,
.page-component-maturity-scale {
  .usa-content {
    > ul:not(.usa-content-list) {
      max-width: $text-max-width;
    }
  }
}

.page-for-developers,
.page-for-designers,
.page-product-roadmap,
.page-component-maturity-scale {
  h2 {
    color: $color-primary-darker;
  }
}

.page-product-roadmap {
  .usa-label {
    display: inline-block;
    position: relative;
  }
}

.usa-center {
  text-align: center;
}

// Headers page -------------- //
.page-headers {
  .preview {
    img {
      box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    }
  }
}

// Custom tooltip styles -------------- //

// Tooltip container
.tooltip {
  display: inline-block;
  position: absolute;

  // Show the tooltip text when you mouse over the tooltip container
  &:hover {
    .tooltip-text {
      opacity: 1;
    }
  }
}

.tooltip-text {
  display: none;

  @include media($medium-screen) {
    @include margin(0 null 0 20px);
    background-color: $color-gray-dark;
    border-radius: $border-radius;
    bottom: 100%;
    color: $color-white;
    display: block;
    font-size: 14px;
    left: 50%;
    padding: 7px 10px;
    width: 267px;
    opacity: 0;
    position: absolute; // Position the tooltip text
    transition: all 0.1s ease-in-out;
    transition-delay: 0.1s;
    z-index: 1;

    &::after {
      border-width: 5px;
      border-style: solid;
      border-color: $color-base transparent transparent transparent;
      content: ' ';
      left: 10%;
      margin-left: -12px;
      position: absolute;
      top: 100%; // At the bottom of the tooltip
    }
  }
}

// Demo fixed footer
.demo-footer {
  background-color: $color-gray-dark;
  box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.5);
  bottom: 0;
  position: fixed;
  width: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  button {
    background-image: url('../img/angle-arrow-left-inverse.png');
    background-image: url('../img/angle-arrow-left-inverse.svg');
    background-repeat: no-repeat;
    background-position: left 2rem center;
    background-size: 1rem;
    padding-left: 3.3rem;

    @include media($medium-screen) {
      @include margin(0 1.5rem 0 null);
    }
  }
}

.demo-footer-title {
  color: $color-white;
  display: inline-block;
}

.demo-footer-content {
  @include margin(null $site-margins-mobile);

  @include media($medium-screen) {
    @include margin(null $site-margins);
  }
}